<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <div>
      <h1>Webpack资源模块加载</h1>
      <p>
        webpack不仅仅是javascript的模块化打包工具,webpack还是整个前端工程的模块打包工具,可以在前端项目引入任意类型的文件
      </p>
      <p>
        因为webpack内部默认只会处理javascript文件,需要处理其他文件的话,需要安装加载器(loader)然后再webpack.config.js进行配置
      </p>
      <p>yarn add css-loader --dev</p>
      <p>
        yarn add style-loader --dev
        它的作用就是把css-loader转换的结果通过style的样式追加到页面
      </p>
      <p>
        这只是尝试把入口修改为css,一般入口都应该为js
        在module属性里面进行配置,再里面写入rules属性module:{reles:[{test:'/.css$/',use:['style-loader','css-loader']}]}
      </p>
      <p>loader是webpack的核心特性,借助Loader就可以加载任何类型的资源</p>
    </div>
    <script></script>
  </body>
</html>
